import React, { useState } from 'react';
import { 
  IonPage, 
  IonContent, 
  IonHeader, 
  IonToolbar, 
  IonButtons, 
  IonMenuButton, 
  IonTitle,
  IonAvatar,
  IonLabel,
  IonNote,
  IonButton,
  IonIcon,
  IonList,
  IonItem,
  IonInput,
  IonTextarea,
  IonSelect,
  IonSelectOption,
  IonToggle,
  IonGrid,
  IonRow,
  IonCol,
  IonText,
  IonCard,
  IonCardHeader,
  IonCardTitle,
  IonCardContent,
  IonFab,
  IonFabButton
} from '@ionic/react';
import { 
  pencil, 
  save, 
  logOut, 
  lockClosed, 
  notifications, 
  mail, 
  globe, 
  logoGithub,
  logoTwitter,
  logoLinkedin,
  camera,
  close,
  checkmark,
  trash
} from 'ionicons/icons';
import { useHistory } from 'react-router-dom';
import './ProfilePage.css';

const ProfilePage: React.FC = () => {
  const history = useHistory();
  const [isEditing, setIsEditing] = useState(false);
  const [isDarkMode, setIsDarkMode] = useState(false);
  const [notificationsEnabled, setNotificationsEnabled] = useState(true);
  const [emailNotifications, setEmailNotifications] = useState(true);
  
  // 用户信息状态
  const [user, setUser] = useState({
    name: '张三',
    username: 'zhangsan',
    email: 'zhangsan@example.com',
    bio: '前端开发工程师，热爱新技术和用户体验设计。',
    location: '北京市',
    website: 'https://zhangsan.dev',
    avatar: 'https://i.pravatar.cc/150?img=12',
    github: 'zhangsan',
    twitter: 'zhangsan_dev',
    linkedin: 'zhangsan'
  });
  
  // 临时编辑状态
  const [editUser, setEditUser] = useState({ ...user });
  
  // 开始编辑
  const startEditing = () => {
    setEditUser({ ...user });
    setIsEditing(true);
  };
  
  // 取消编辑
  const cancelEditing = () => {
    setIsEditing(false);
  };
  
  // 保存编辑
  const saveProfile = () => {
    setUser(editUser);
    setIsEditing(false);
    // 实际应用中这里会调用API更新用户信息
  };
  
  // 处理输入变化
  const handleInputChange = (field: string, value: string) => {
    setEditUser({
      ...editUser,
      [field]: value
    });
  };
  
  // 退出登录
  const handleLogout = () => {
    // 实际应用中这里会清除用户会话
    history.push('/login');
  };
  
  // 切换主题
  const toggleDarkMode = () => {
    setIsDarkMode(!isDarkMode);
    document.body.classList.toggle('dark', !isDarkMode);
  };
  
  // 更改头像
  const changeAvatar = () => {
    // 实际应用中这里会调用相机或相册选择图片
    alert('更改头像功能');
  };

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonMenuButton />
          </IonButtons>
          <IonTitle>个人资料</IonTitle>
          <IonButtons slot="end">
            {isEditing ? (
              <>
                <IonButton onClick={cancelEditing}>
                  <IonIcon slot="icon-only" icon={close} />
                </IonButton>
                <IonButton onClick={saveProfile}>
                  <IonIcon slot="icon-only" icon={save} />
                </IonButton>
              </>
            ) : (
              <IonButton onClick={startEditing}>
                <IonIcon slot="icon-only" icon={pencil} />
              </IonButton>
            )}
          </IonButtons>
        </IonToolbar>
      </IonHeader>
      
      <IonContent className="ion-padding">
        {/* 头像区域 */}
        <div className="profile-header">
          <div className="avatar-container">
            <IonAvatar className="profile-avatar">
              <img src={user.avatar} alt={user.name} />
            </IonAvatar>
            {isEditing && (
              <IonButton 
                fill="clear" 
                className="avatar-edit-button"
                onClick={changeAvatar}
              >
                <IonIcon icon={camera} />
              </IonButton>
            )}
          </div>
          
          <div className="profile-info">
            {isEditing ? (
              <>
                <IonInput
                  value={editUser.name}
                  placeholder="姓名"
                  onIonChange={e => handleInputChange('name', e.detail.value!)}
                  className="profile-name-input"
                />
                <IonInput
                  value={editUser.username}
                  placeholder="用户名"
                  onIonChange={e => handleInputChange('username', e.detail.value!)}
                  className="profile-username-input"
                />
              </>
            ) : (
              <>
                <h1 className="profile-name">{user.name}</h1>
                <IonNote className="profile-username">@{user.username}</IonNote>
              </>
            )}
          </div>
        </div>
        
        {/* 个人简介 */}
        <div className="profile-section">
          <h2 className="section-title">个人简介</h2>
          {isEditing ? (
            <IonTextarea
              value={editUser.bio}
              placeholder="介绍一下你自己..."
              rows={3}
              onIonChange={e => handleInputChange('bio', e.detail.value!)}
              className="profile-bio-input"
            />
          ) : (
            <p className="profile-bio">{user.bio}</p>
          )}
        </div>
        
        {/* 联系信息 */}
        <div className="profile-section">
          <h2 className="section-title">联系信息</h2>
          <IonList lines="none" className="contact-list">
            <IonItem>
              <IonLabel position="stacked">电子邮箱</IonLabel>
              {isEditing ? (
                <IonInput
                  type="email"
                  value={editUser.email}
                  placeholder="邮箱地址"
                  onIonChange={e => handleInputChange('email', e.detail.value!)}
                />
              ) : (
                <IonText>{user.email}</IonText>
              )}
            </IonItem>
            
            <IonItem>
              <IonLabel position="stacked">所在地</IonLabel>
              {isEditing ? (
                <IonInput
                  value={editUser.location}
                  placeholder="所在地"
                  onIonChange={e => handleInputChange('location', e.detail.value!)}
                />
              ) : (
                <IonText>{user.location}</IonText>
              )}
            </IonItem>
            
            <IonItem>
              <IonLabel position="stacked">个人网站</IonLabel>
              {isEditing ? (
                <IonInput
                  value={editUser.website}
                  placeholder="个人网站"
                  onIonChange={e => handleInputChange('website', e.detail.value!)}
                />
              ) : (
                <IonText>
                  <a href={user.website} target="_blank" rel="noopener noreferrer">
                    {user.website}
                  </a>
                </IonText>
              )}
            </IonItem>
          </IonList>
        </div>
        
        {/* 社交链接 */}
        <div className="profile-section">
          <h2 className="section-title">社交链接</h2>
          <IonGrid className="social-links">
            <IonRow>
              <IonCol size="4">
                <IonItem>
                  <IonLabel position="stacked">GitHub</IonLabel>
                  {isEditing ? (
                    <IonInput
                      value={editUser.github}
                      placeholder="GitHub用户名"
                      onIonChange={e => handleInputChange('github', e.detail.value!)}
                    />
                  ) : (
                    <IonText>
                      <a 
                        href={`https://github.com/${user.github}`} 
                        target="_blank" 
                        rel="noopener noreferrer"
                        className="social-link"
                      >
                        <IonIcon icon={logoGithub} /> {user.github}
                      </a>
                    </IonText>
                  )}
                </IonItem>
              </IonCol>
              
              <IonCol size="4">
                <IonItem>
                  <IonLabel position="stacked">Twitter</IonLabel>
                  {isEditing ? (
                    <IonInput
                      value={editUser.twitter}
                      placeholder="Twitter用户名"
                      onIonChange={e => handleInputChange('twitter', e.detail.value!)}
                    />
                  ) : (
                    <IonText>
                      <a 
                        href={`https://twitter.com/${user.twitter}`} 
                        target="_blank" 
                        rel="noopener noreferrer"
                        className="social-link"
                      >
                        <IonIcon icon={logoTwitter} /> @{user.twitter}
                      </a>
                    </IonText>
                  )}
                </IonItem>
              </IonCol>
              
              <IonCol size="4">
                <IonItem>
                  <IonLabel position="stacked">LinkedIn</IonLabel>
                  {isEditing ? (
                    <IonInput
                      value={editUser.linkedin}
                      placeholder="LinkedIn用户名"
                      onIonChange={e => handleInputChange('linkedin', e.detail.value!)}
                    />
                  ) : (
                    <IonText>
                      <a 
                        href={`https://linkedin.com/in/${user.linkedin}`} 
                        target="_blank" 
                        rel="noopener noreferrer"
                        className="social-link"
                      >
                        <IonIcon icon={logoLinkedin} /> {user.linkedin}
                      </a>
                    </IonText>
                  )}
                </IonItem>
              </IonCol>
            </IonRow>
          </IonGrid>
        </div>
        
        {/* 账户设置 */}
        <div className="profile-section">
          <h2 className="section-title">账户设置</h2>
          <IonList lines="full" className="settings-list">
            <IonItem>
              <IonIcon slot="start" icon={lockClosed} />
              <IonLabel>更改密码</IonLabel>
              <IonButton fill="outline" slot="end">更改</IonButton>
            </IonItem>
            
            <IonItem>
              <IonIcon slot="start" icon={notifications} />
              <IonLabel>通知设置</IonLabel>
              <IonToggle 
                slot="end" 
                checked={notificationsEnabled} 
                onIonChange={e => setNotificationsEnabled(e.detail.checked)}
              />
            </IonItem>
            
            <IonItem>
              <IonIcon slot="start" icon={mail} />
              <IonLabel>邮件通知</IonLabel>
              <IonToggle 
                slot="end" 
                checked={emailNotifications} 
                onIonChange={e => setEmailNotifications(e.detail.checked)}
              />
            </IonItem>
            
            <IonItem>
              <IonIcon slot="start" icon={globe} />
              <IonLabel>深色模式</IonLabel>
              <IonToggle 
                slot="end" 
                checked={isDarkMode} 
                onIonChange={toggleDarkMode}
              />
            </IonItem>
          </IonList>
        </div>
        
        {/* 账户操作 */}
        <div className="profile-section">
          <h2 className="section-title">账户操作</h2>
          <IonGrid>
            <IonRow>
              <IonCol size="12" sizeMd="6">
                <IonButton 
                  expand="block" 
                  color="medium" 
                  fill="outline"
                  onClick={handleLogout}
                >
                  <IonIcon slot="start" icon={logOut} />
                  退出登录
                </IonButton>
              </IonCol>
              
              <IonCol size="12" sizeMd="6">
                <IonButton 
                  expand="block" 
                  color="danger" 
                  fill="outline"
                >
                  <IonIcon slot="start" icon={trash} />
                  删除账户
                </IonButton>
              </IonCol>
            </IonRow>
          </IonGrid>
        </div>
        
        {/* 编辑模式下的保存按钮 */}
        {isEditing && (
          <IonFab vertical="bottom" horizontal="end" slot="fixed">
            <IonFabButton color="primary" onClick={saveProfile}>
              <IonIcon icon={checkmark} />
            </IonFabButton>
          </IonFab>
        )}
      </IonContent>
    </IonPage>
  );
};

export default ProfilePage;